<template>
  <div class="users-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>用户管理</span>
        <el-button
          style="float: right; margin-top: -5px"
          type="primary"
          @click="handleCreate">
          <i class="el-icon-plus"></i> 新增用户
        </el-button>
      </div>
      <div class="search-bar">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-input
              v-model="searchKey"
              placeholder="请输入用户名/邮箱/手机号"
              @keyup.enter.native="handleSearch">
              <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
            </el-input>
          </el-col>
          <el-col :span="5">
            <el-select v-model="sortBy" placeholder="排序字段" @change="handleSearch">
              <el-option label="注册时间" value="registertime"></el-option>
              <el-option label="用户名" value="username"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="sortDesc" placeholder="排序方向" @change="handleSearch">
              <el-option label="降序" :value="true"></el-option>
              <el-option label="升序" :value="false"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-button @click="resetSearch">重置</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table
        :data="users"
        stripe
        border
        style="width: 100%; margin-top: 20px"
        v-loading="loading">
        <!-- 移除或注释掉这个ID列 -->
        <!-- <el-table-column
          prop="id"
          label="ID"
          width="80">
        </el-table-column> -->
        
        <!-- 新增头像列 -->
        <el-table-column
          label="头像"
          width="80"
          align="center">
          <template slot-scope="scope">
            <el-avatar 
              :size="50" 
              :src="scope.row.avatar || require('@/img/1.jpg')"
              @error="handleAvatarError">
              <img :src="require('@/img/1.jpg')" alt="默认头像" />
            </el-avatar>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="userName"
          label="用户名">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号">
        </el-table-column>
        <el-table-column
          label="角色"
          width="200">
          <template slot-scope="scope">
            <el-tag
              v-for="role in scope.row.roles || []"
              :key="role.roleId"
              size="mini"
              style="margin-right: 5px;">
              {{ role.roleName }}
            </el-tag>
            <span v-if="!scope.row.roles || scope.row.roles.length === 0" style="color: #999;">暂无角色</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="100">
          <template slot-scope="scope">
            <el-tag
              :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="registerTime"
          label="注册时间"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          width="380"
          fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
              <!-- 第一行按钮 -->
              <div class="button-row">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)">
                  <i class="el-icon-edit"></i>
                  编辑
                </el-button>
                <el-button
                  size="mini"
                  type="success"
                  @click="handleAssignRoles(scope.row)">
                  <i class="el-icon-s-custom"></i>
                  分配角色
                </el-button>
                <el-button
                  size="mini"
                  type="warning"
                  @click="handleChangePassword(scope.row)">
                  <i class="el-icon-key"></i>
                  修改密码
                </el-button>
              </div>
              
              <!-- 第二行按钮 -->
              <div class="button-row">
                <el-button
                  size="mini"
                  :type="scope.row.status === 1 ? 'warning' : 'success'"
                  @click="handleToggleStatus(scope.row)">
                  <i :class="scope.row.status === 1 ? 'el-icon-lock' : 'el-icon-unlock'"></i>
                  {{ scope.row.status === 1 ? '禁用' : '启用' }}
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)">
                  <i class="el-icon-delete"></i>
                  删除
                </el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 创建/编辑用户对话框 -->
    <el-dialog :visible.sync="dialogFormVisible" :title="formData.id ? '编辑用户' : '新增用户'" width="600px">
      <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
        <!-- 头像上传 -->
        <el-form-item label="用户头像">
          <div class="avatar-upload-container">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :http-request="handleAvatarUpload">
              <div class="avatar-preview">
                <img v-if="formData.avatar" :src="formData.avatar" class="avatar" alt="用户头像">
                <img v-else :src="require('@/img/1.jpg')" class="avatar" alt="默认头像">
                <div class="avatar-overlay">
                  <i class="el-icon-camera"></i>
                  <span>{{ formData.avatar ? '更换头像' : '上传头像' }}</span>
                </div>
              </div>
            </el-upload>
            <div class="avatar-actions">
              <el-button size="mini" type="text" @click="removeAvatar" v-if="formData.avatar">移除头像</el-button>
            </div>
          </div>
        </el-form-item>
        
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="formData.userName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formData.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="!formData.id">
          <el-input v-model="formData.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="formData.gender">
            <el-radio :label="0">未知</el-radio>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker
            v-model="formData.birthday"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        
        <!-- 新增用户时显示角色选择 -->
        <el-form-item label="用户角色" prop="roleIds" v-if="!formData.id">
          <el-select 
            v-model="createFormData.roleIds" 
            multiple 
            placeholder="请选择用户角色"
            style="width: 100%">
            <el-option
              v-for="role in roleList"
              :key="role.id"
              :label="role.name"
              :value="role.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
      </div>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogDeleteVisible"
      width="30%">
      <span>确定要删除用户 {{ deleteUserName }} 吗？</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDeleteVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete" :loading="deleteLoading">确定</el-button>
      </div>
    </el-dialog>

    <!-- 角色分配对话框 -->
    <el-dialog
      title="分配角色"
      :visible.sync="roleAssignVisible"
      width="50%"
      :close-on-click-modal="false">
      <div v-loading="roleAssignLoading">
        <!-- 用户信息 -->
        <div style="margin-bottom: 20px; padding: 15px; background: #f0f9ff; border-radius: 6px; border-left: 3px solid #409EFF;">
          <p style="margin: 0; font-size: 16px;">
            <i class="el-icon-user" style="margin-right: 8px; color: #409EFF;"></i>
            为用户 <strong style="color: #409EFF;">{{ currentUserName }}</strong> 分配角色
          </p>
        </div>
        
        <!-- 角色列表 -->
        <div v-if="roleList.length > 0">
          <h4 style="margin: 0 0 15px 0; font-size: 14px; color: #606266;">
            <i class="el-icon-s-custom" style="margin-right: 5px;"></i>
            可分配角色
          </h4>
          <el-checkbox-group v-model="selectedRoles">
            <div v-for="role in roleList" :key="role.roleId || role.id" 
                 style="margin-bottom: 10px; padding: 10px; border: 1px solid #EBEEF5; border-radius: 4px;">
              <el-checkbox :label="role.roleId || role.id">
                <span style="font-weight: 500;">{{ role.roleName }}</span>
                <span v-if="role.description" style="color: #909399; margin-left: 10px;">
                  ({{ role.description }})
                </span>
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
        
        <!-- 空状态 -->
        <div v-else style="text-align: center; color: #909399; padding: 20px;">
          <i class="el-icon-warning-outline" style="font-size: 24px; display: block; margin-bottom: 10px;"></i>
          暂无可分配的角色
        </div>
        
        <!-- 统计信息 -->
        <div style="margin-top: 20px; padding: 10px; background-color: #f5f7fa; border-radius: 4px;">
          <p style="margin: 0; color: #606266; font-size: 14px;">
            <i class="el-icon-info" style="color: #409EFF;"></i> 
            已选择 <strong style="color: #409EFF;">{{ selectedRoles.length }}</strong> 个角色
          </p>
        </div>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleAssignVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveRoles" :loading="roleAssignLoading">
          确 定
        </el-button>
      </div>
    </el-dialog>
    
    <!-- 修改密码对话框 -->
    <el-dialog 
      title="修改用户密码" 
      :visible.sync="passwordDialogVisible" 
      width="500px" 
      :close-on-click-modal="false"> 
      <div v-loading="passwordLoading"> 
        <!-- 用户信息 --> 
        <div style="margin-bottom: 20px; padding: 15px; background: #fff7e6; border-radius: 6px; border-left: 3px solid #E6A23C;"> 
          <p style="margin: 0; font-size: 16px;"> 
            <i class="el-icon-user" style="margin-right: 8px; color: #E6A23C;"></i> 
            为用户 <strong style="color: #E6A23C;">{{ currentPasswordUser.userName }}</strong> 修改密码 
          </p> 
          <p style="margin: 5px 0 0 0; font-size: 12px; color: #909399;"> 
            用户ID: {{ currentPasswordUser.id }} 
          </p> 
        </div> 
        
        <!-- 密码表单 --> 
        <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="120px"> 
          <el-form-item label="新密码" prop="newPassword"> 
            <el-input 
              v-model="passwordForm.newPassword" 
              type="password" 
              show-password 
              placeholder="请输入新密码（至少8位，包含字母和数字）" 
              autocomplete="new-password"> 
            </el-input> 
          </el-form-item> 
          
          <el-form-item label="确认新密码" prop="confirmPassword"> 
            <el-input 
              v-model="passwordForm.confirmPassword" 
              type="password" 
              show-password 
              placeholder="请再次输入新密码" 
              autocomplete="new-password"> 
            </el-input> 
          </el-form-item> 
          
          <div style="background: #f0f9ff; padding: 10px; border-radius: 4px; margin-top: 15px;"> 
            <p style="margin: 0; font-size: 12px; color: #606266;"> 
              <i class="el-icon-info" style="color: #409EFF; margin-right: 5px;"></i> 
              密码要求： 
            </p> 
            <ul style="margin: 5px 0 0 20px; font-size: 12px; color: #909399;"> 
              <li>长度至少6位</li> 
              <li>可以包含字母、数字和特殊字符</li> 
            </ul> 
          </div> 
        </el-form> 
      </div> 
      
      <div slot="footer" class="dialog-footer"> 
        <el-button @click="passwordDialogVisible = false">取消</el-button> 
        <el-button 
          type="primary" 
          @click="handlePasswordSubmit" 
          :loading="passwordLoading"> 
          确定修改 
        </el-button> 
      </div> 
    </el-dialog>
  </div>
</template>

<script>
import { getUserList, createUser, updateUser, deleteUser, getRoleList, assignUserRoles, getUserRoles, resetUserPassword } from '@/api/user'

export default {
  data() {
    return {
      roleList: [], // 添加角色列表
      users: [],
      searchKey: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      submitLoading: false,
      deleteLoading: false,
      sortBy: 'registertime',
      sortDesc: true,
      dialogFormVisible: false,
      dialogDeleteVisible: false,
      formData: {
        id: null,
        userName: '',
        email: '',
        phone: '',
        password: '',
        gender: 0,
        birthday: '',
        avatar: '' // 添加avatar字段，默认为空字符串
      },
      createFormData: {
        userName: '',
        password: '',
        phone: '',
        email: '',
        status: 0,
        gender: 0,
        roleIds: [],
        avatar: '' // 添加avatar字段，默认为空字符串
      },
      deleteUserId: null,
      deleteUserName: '',
      // 角色分配相关字段
      roleAssignVisible: false,
      currentUserId: null,
      currentUserName: '',
      selectedRoles: [],
      roleAssignLoading: false,
      // 修改密码相关字段（添加这些缺失的属性）
      passwordDialogVisible: false,
      passwordLoading: false,
      currentPasswordUser: {
        id: null,
        userName: ''
      },
      passwordForm: {
        newPassword: '',
        confirmPassword: ''
      },
      passwordRules: {
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度至少为6位', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value !== this.passwordForm.newPassword) {
              callback(new Error('两次输入的密码不一致'));
            } else {
              callback();
            }
          }, trigger: 'blur' }
        ]
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '用户名长度在3-20个字符之间', trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ],
        phone: [
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchUsers();
    this.fetchRoles(); // 调用方法
  },
  methods: {
    // 获取角色列表
    async fetchRoles() {
      try {
        const response = await getRoleList();
        if (response.success && response.data) {
          // 过滤掉ID为null或undefined的角色
          this.roleList = response.data.filter(role => role.id != null && role.id !== '');
          console.log('角色列表获取成功:', this.roleList);
          console.log('原始数据:', response.data); // 查看原始数据
        } else {
          this.roleList = [];
          this.$message.error(response.message || '获取角色列表失败');
        }
      } catch (error) {
        console.error('获取角色列表失败:', error);
        this.$message.error('获取角色列表失败：' + (error.message || '未知错误'));
        this.roleList = [];
      }
    },
    
    async fetchUsers() {
      this.loading = true;
      try {
        const params = {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.searchKey || '',     // 确保不为 null/undefined
          sortBy: this.sortBy || 'registertime',  // 确保有默认值
          sortDesc: this.sortDesc !== undefined ? this.sortDesc : true
        };
        
        const response = await getUserList(params);
        
        // 处理响应数据
        if (response.success) {
          this.users = response.data || [];
          this.total = response.totalCount || 0;
        } else {
          this.$message.error(response.message || '获取用户列表失败');
          this.users = [];
          this.total = 0;
        }
      } catch (error) {
        this.$message.error('获取用户列表失败：' + (error.message || '未知错误'));
        this.users = [];
        this.total = 0;
      } finally {
        this.loading = false;
      }
    },
    getStatusType(status) {
      const statusMap = {
        1: 'success',  // 正常
        2: 'warning',  // 禁用
        3: 'danger',   // 锁定
        4: 'info'      // 删除
      };
      return statusMap[status] || 'info';
    },
    getStatusText(status) {
      const statusMap = {
        1: '正常',
        2: '禁用',
        3: '锁定',
        4: '删除'
      };
      return statusMap[status] || '未知';
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.fetchUsers();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchUsers();
    },
    handleSearch() {
      this.currentPage = 1;
      this.fetchUsers();
    },
    resetSearch() {
      this.searchKey = '';
      this.sortBy = 'registertime';
      this.sortDesc = true;
      this.currentPage = 1;
      this.fetchUsers();
    },
    handleCreate() {
      // 重置创建表单数据
      this.createFormData = {
        userName: '',
        password: '',
        phone: '',
        email: '',
        status: 0,
        gender: 0,
        roleIds: [],
        avatar: '' // 添加avatar字段
      };
      // 清空编辑表单数据，标识为新增模式
      this.formData = {
        id: null,
        userName: '',
        email: '',
        phone: '',
        password: '',
        gender: 0,
        birthday: '',
        avatar: '' // 添加avatar字段
      };
      this.dialogFormVisible = true;
    },
    
    handleEdit(index, row) {
      this.formData = { 
        ...row, 
        password: '',
        avatar: row.avatar || '' // 确保avatar为空字符串而不是null
      };
      this.dialogFormVisible = true;
    },
    
    async handleSubmit() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          this.submitLoading = true;
          try {
            if (this.formData.id) {
              // 更新用户 - 确保avatar字段为空字符串而不是null
              const updateData = {
                ...this.formData,
                avatar: this.formData.avatar || '' // 确保为空字符串
              };
              await updateUser(this.formData.id, updateData);
              this.$message.success('用户更新成功');
            } else {
              // 创建用户 - 使用创建数据，确保参数匹配后端要求
              const createData = {
                userName: this.formData.userName,
                password: this.formData.password,
                phone: this.formData.phone || '',
                email: this.formData.email || '',
                status: this.createFormData.status,
                gender: this.formData.gender,
                level: this.createFormData.level,
                roleIds: this.createFormData.roleIds,
                avatar: this.formData.avatar || '' // 确保为空字符串
              };
              await createUser(createData);
              this.$message.success('用户创建成功');
            }
            this.dialogFormVisible = false;
            this.fetchUsers();
          } catch (error) {
            this.$message.error((this.formData.id ? '更新' : '创建') + '用户失败：' + (error.message || '未知错误'));
          } finally {
            this.submitLoading = false;
          }
        } else {
          this.$message.error('表单验证失败，请检查输入');
          return false;
        }
      });
    },
    
    // 头像相关方法
    handleAvatarError() {
      // 头像加载错误时的处理
      console.log('头像加载失败，使用默认头像');
    },
    
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG/GIF 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    
    handleAvatarUpload(options) {
      // 这里应该实现真正的文件上传逻辑
      // 目前先模拟一个本地预览
      const file = options.file;
      const reader = new FileReader();
      reader.onload = (e) => {
        this.formData.avatar = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    
    removeAvatar() {
      this.formData.avatar = ''; // 设置为空字符串而不是null
    },
    async confirmDelete() {
      this.deleteLoading = true;
      try {
        await deleteUser(this.deleteUserId);
        this.dialogDeleteVisible = false;
        this.$message.success('用户删除成功');
        this.fetchUsers();
      } catch (error) {
        this.$message.error('删除用户失败：' + (error.message || '未知错误'));
      } finally {
        this.deleteLoading = false;
      }
    },
    
    // 打开角色分配对话框
    async handleAssignRoles(row) {
      console.log('开始为用户分配角色:', row);
      this.currentUserId = row.id;
      this.currentUserName = row.userName;
      this.selectedRoles = []; // 先清空
      this.roleAssignVisible = true;
      this.roleAssignLoading = true;
      
      try {
        // 获取用户当前的角色
        const response = await getUserRoles(row.id);
        console.log('用户角色响应:', response);
        console.log('角色列表数据:', this.roleList); // 添加调试信息
        
        if (response.success && response.data && response.data.roles) {
          // 确保字段匹配，优先使用roleId，其次使用id
          this.selectedRoles = response.data.roles.map(role => {
            const roleId = role.roleId || role.id;
            console.log('映射角色ID:', roleId, '来源:', role);
            return roleId;
          }).filter(id => id != null); // 过滤掉null值
          
          console.log('用户已有角色ID:', this.selectedRoles);
          console.log('可选角色列表:', this.roleList.map(r => ({id: r.id, roleId: r.roleId, name: r.roleName})));
        } else {
          this.selectedRoles = [];
          console.log('用户暂无角色');
        }
      } catch (error) {
        console.error('获取用户角色失败:', error);
        this.$message.error('获取用户角色失败：' + (error.message || '未知错误'));
        this.selectedRoles = [];
      } finally {
        this.roleAssignLoading = false;
      }
    },
    
    // 保存角色分配
    async handleSaveRoles() {
      console.log('保存角色分配:', {
        userId: this.currentUserId,
        roleIds: this.selectedRoles
      });
      
      // 过滤掉null和undefined值
      const validRoleIds = this.selectedRoles.filter(roleId => roleId != null && roleId !== '');
      
      console.log('过滤后的角色ID:', validRoleIds);
      
      this.roleAssignLoading = true;
      try {
        const response = await assignUserRoles(this.currentUserId, validRoleIds);
        console.log('角色分配响应:', response);
        
        if (response.success) {
          this.$message.success('角色分配成功');
          this.roleAssignVisible = false;
          this.fetchUsers();
        } else {
          this.$message.error(response.message || '角色分配失败');
        }
      } catch (error) {
        console.error('分配角色失败:', error);
        this.$message.error('角色分配失败：' + (error.message || '未知错误'));
      } finally {
        this.roleAssignLoading = false;
      }
    },
    
    // 打开修改密码对话框
    handleChangePassword(row) {
      this.currentPasswordUser = {
        id: row.id,
        userName: row.userName
      };
      this.passwordForm = {
        newPassword: '',
        confirmPassword: ''
      };
      this.passwordDialogVisible = true;
      this.$nextTick(() => {
        if (this.$refs.passwordFormRef) {
          this.$refs.passwordFormRef.clearValidate();
        }
      });
    },
    
    // 提交密码修改
    async handlePasswordSubmit() {
      try {
        await this.$refs.passwordFormRef.validate();
        this.passwordLoading = true;
        
        // 调用重置用户密码API
        await resetUserPassword(this.currentPasswordUser.id, this.passwordForm.newPassword);
        
        this.$message.success('密码修改成功');
        this.passwordDialogVisible = false;
      } catch (error) {
        console.error('密码修改失败:', error);
        this.$message.error('密码修改失败: ' + (error.message || '未知错误'));
      } finally {
        this.passwordLoading = false;
      }
    }
  }
}
</script>

<style scoped>
/* 操作按钮样式 */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.button-row {
  display: flex;
  gap: 5px;
  justify-content: flex-start;
}

.button-row .el-button {
  flex: 1;
  min-width: 70px;
  padding: 5px 8px;
}

.button-row .el-button i {
  margin-right: 3px;
}

/* 响应式处理 */
@media (max-width: 1200px) {
  .action-buttons {
    flex-direction: column;
  }
  
  .button-row {
    flex-direction: column;
    gap: 3px;
  }
}

.users-container {
  padding: 20px;
}

.search-bar {
  margin-top: 10px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

/* 头像相关样式 */
/* 表格中的头像样式 */
.el-avatar {
  width: 40px !important;
  height: 40px !important;
}

.el-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 编辑对话框中的头像上传样式 */
.avatar-upload-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar-preview {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 6px;
}

.avatar-preview:hover .avatar-overlay {
  opacity: 1;
}

.avatar-overlay i {
  font-size: 20px;
  margin-bottom: 5px;
}

.avatar-overlay span {
  font-size: 12px;
  text-align: center;
}

.avatar-actions {
  margin-top: 10px;
}
</style>
